<template>
	<view class="">
		<view class="category-box" >
		<!-- <view class="category-box" v-if="isshow == true"> -->
			<!-- 模版一的搜索框 -->
			<view class="category-search-box" v-if="templatetype == 1">
				<text class="iconsearch_light iconfont category-search-btn" @click="search()"></text>
				<input class="uni-input" type="text" maxlength="50" v-model="searchText" confirm-type="搜索" placeholder="请输入关键词" @confirm="search()" />
			</view>
			<!-- 模版一的筛选条件 -->
			<view class="category-condition" v-if="templatetype == 1">
				<text class="sort" :class="{ 'ns-text-color': conditionIdent == 0 }" @click="comprehensiveSorting">综合排序</text>
				<text class="price" :class="{ 'ns-text-color': conditionIdent == 1, 'price-asc': priceIdent == 1, 'price-desc': priceIdent == 2 }" @click="price">按价格</text>
				<text class="sales-volume" :class="{ 'ns-text-color': conditionIdent == 2 }" @click="salesVolume">按销量</text>
			</view>
			<!-- 分类内容 -->
			<view v-if="categoryList.length > 0" class="category-content" :class="{ 'modular-one': templatetype == 1, 'modular-two': templatetype == 2 }">
				<!-- 侧边导航 -->
				<scroll-view scroll-y class="category-side-nav">
					<block v-for="(item, index) in categoryList" :key="index">
						<text v-if="nameType == 0" class="side-nav-item" :class="{ 'nav-select': sideIdent == index }" @click="sideNavClick(item.category_id, index)">
							{{ item.category_name }}
						</text>
						<text v-else class="side-nav-item" :class="{ 'nav-select': sideIdent == index }" @click="sideNavClick(item.category_id, index)">{{ item.short_name }}</text>
					</block>
				</scroll-view>
				<view class="catergory-details">
					<!-- 分类一 -->
					<scroll-view v-if="templatetype == 1" scroll-y scroll-with-animation show-scrollbar="false" class="catergory-temple-one" @scrolltolower="getGoodsInfo()" @scroll="scroll" scroll-top="20">
						<navigator v-for="(item, index) in goodsList" :key="index" class="temple-one-item" :url="'/pages/goods/detail/detail?goods_id=' + item.goods_id">
							<view class="item-pic">
								<image :src="item.pic_cover_small == '' ? $util.img('upload/uniapp/default_goods.png') : $util.img(item.pic_cover_small)" mode="aspectFit" style="width:280rpx;height: 280rpx;"></image>
							</view>
							<view class="item-content">
								<text class="item-desc">{{ item.goods_name }}</text>
								<view style="font-size: 20rpx;">
									<text>规格:{{item.Specifications}}</text></br>
									<!-- <text>生产期:{{item.production_date}}</text></br> -->
									<text>有效期至:{{item.shelf_life}}</text>
								</view>
								<view class="item-operation">
									<!-- <text class="ns-text-color">零售价:¥{{ item.market_price }}元</text> -->
									
									
								</view>
								<view class="item-operation">
									<text class="ns-text-color">¥{{getToken?item.promotion_price:item.market_price}}元</text>
									
									<view @tap.stop="addshopping(item)">
										<image src="../../../static/addiCon.png" style="width: 30rpx; height: 30rpx;margin-right: 20rpx;"></image>
									</view>
									<!-- <text class="ns-text-color-gray">销量：{{ item.sales }}</text> -->
								</view>
							</view>
						</navigator>
						<uni-load-more :status="status" v-if="pageCount > 1 && goodsList.length > 0" />
					</scroll-view>
					<!-- 分类二 -->
					<scroll-view scroll-y v-if="templatetype == 2" class="catergory-temple-two">
						<navigator v-for="(item, index) in TwoCategoryList" :key="index" class="temple-two-item" :url="'/pages/goods/list/list?category_id=' + item.category_id">
							<view v-if="showImg == 1" class="item-pic">
								<image :src="$util.img(item.category_pic) ? $util.img(item.category_pic) : $util.img('upload/uniapp/default_goods.png')" mode=""></image>
							</view>
							<text class="item-name" :class="{ 'no-img': showImg == 0 }">{{ item.category_name }}</text>
						</navigator>
					</scroll-view>
					<!-- 分类三 -->
					<scroll-view scroll-y v-if="templatetype == 3" class="catergory-temple-three">
						<view v-for="(item, index) in TwoCategoryList" :key="index" class="temple-three-item">
							<!-- 三级标题 -->
							<navigator v-if="nameType == 0" class="item-title" :url="'/pages/goods/list/list?category_id=' + item.category_id">{{ item.category_name }}</navigator>
							<navigator v-else class="item-title" :url="'/pages/goods/list/list?category_id=' + item.category_id">{{ item.short_name }}</navigator>
					
							<view v-if="item.child_list" class="temple-three-content">
								<navigator
									v-for="(item1, index1) in item.child_list"
									:key="index1"
									class="temple-three-cell"
									:url="'/pages/goods/list/list?category_id=' + item1.category_id"
								>
									<view v-if="showImg == 1" class="item-pic">
										<image :src="$util.img(item1.category_pic) ? $util.img(item1.category_pic) : $util.img('upload/uniapp/default_goods.png')" mode=""></image>
									</view>
									<text v-if="nameType == 0" class="item-name" :class="{ 'no-img': showImg == 0 }">{{ item1.category_name }}</text>
									<text v-else class="item-name" :class="{ 'no-img': showImg == 0 }">{{ item1.short_name }}</text>
								</navigator>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			
			
			
			
			
			
			
			
			
			
			<view v-if="isEmpty && categoryList.length == 0" class="empty">
				<view class="iconfont iconwenzhangchaxun"></view>
				<view class="ns-text-color-gray">Sorry！没有找到您想要的商品分类…</view>
			</view>
			<loading-cover ref="loadingCover"></loading-cover>
		</view>
		<view @touchmove.prevent.stop>
			<uni-popup ref="skuPopup" type="bottom" class="sku-layer">
				<view class="sku-info">
					<view class="header" style="">
						<view class="img-wrap">
							<image :src="$util.img(selectedSkuInfo.picCoverSmall)" />
						</view>
						<view class="main">
							<view v-if="goodsDetail['is_open_presell'] == 1">
								<view class="price-wrap">
									<text class="price ns-text-color">定金¥{{ goodsDetail.presell_price }}</text>
								</view>
							</view>
							<view v-else>
								<view class="price-wrap">
									<template
										v-if="(goodsDetail.point_exchange_type == 2 && fromSource == 'point') || goodsDetail.point_exchange_type == 3">
										<!--积分-->
										<text class="price ns-text-color">{{ goodsDetail.point_exchange }}积分</text>
									</template>
									<template v-else>
										<text class="price ns-text-color">{{ selectedSkuInfo.displayPrice }}</text>
									</template>
								</view>
							</view>
		
							<view v-if="goodsDetail.is_stock_visible == 1" class="stock">
								库存{{ selectedSkuInfo.stock }}
								<template v-if="goodsDetail.goods_unit != ''">
									{{ goodsDetail.goods_unit }}
								</template>
								<template v-else>
									件
								</template>
							</view>
		
							<view class="sku-name">
								<template v-if="currentGoodsSkuName.length > 0">
									已选择：
									<text v-for="(item, index) in currentGoodsSkuName"
										:key="index">{{ item }}</text>
								</template>
							</view>
						</view>
		
						<view class="sku-close iconfont iconclose" @click="closeSkuPopup()"></view>
					</view>
		
					<view class="body-item" :class="{'safearea' : isIphoneX}">
						<scroll-view scroll-y="true" class="wrap">
							<view v-for="(item, index) in goodsDetail['spec_list']" :key="index"
								class="sku-list-wrap">
								<text class="title">{{ item.spec_name }}</text>
								<view v-for="(item_value, index_value) in item.value" :key="index_value"
									class="items ns-border-color-gray ns-bg-color-gray"
									:class="{ selected: item_value['selected'], disabled: item_value['disabled'] }"
									@click="selectedSku(item_value)">
									<template v-if="item_value.spec_show_type == 1">
										<text>{{ item_value.spec_value_name }}</text>
									</template>
									<template v-else-if="item_value.spec_show_type == 2">
										<image v-if="item_value.spec_value_data != ''"
											:src="$util.img(item_value.spec_value_data)"></image>
										<text>{{ item_value.spec_value_name }}</text>
									</template>
		
									<template v-else-if="item_value.spec_show_type == 3">
										<text v-if="item_value.spec_value_data != ''" class="color"
											:style="{ background: item_value.spec_value_data }"></text>
										<text>{{ item_value.spec_value_name }}</text>
									</template>
								</view>
							</view>
		
							<view class="number-wrap">
								<view class="number-line">
									<text class="title">购买数量</text>
									<text class="limit-txt" v-if="goodsDetail['max_buy'] > 0">
										(每人限购{{ goodsDetail['max_buy'] }}
										<template v-if="goodsDetail.goods_unit != ''">
											{{ goodsDetail.goods_unit }}
										</template>
										<template v-else>
											件
										</template>
										)
									</text>
									<view class="number">
										<button type="default" class="decrease" @click="changeNum('-')">-</button>
										<!-- <input class="uni-input" type="number" v-model="number" placeholder="0" @input="keyInput" /> -->
										<input class="uni-input" type="number" v-model="number" placeholder="0"
											@input="keyInput2" />
										<button type="default" class="increase" @click="changeNum('+')">+</button>
									</view>
								</view>
							</view>
							<!-- 哈哈哈哈哈哈 -->
						</scroll-view>
					</view>
		
					<button type="primary"  style="position: absolute;bottom: 100rpx;" @click="confirm()" class="footer"
						:class="{ disabled: selectedSkuInfo.stock == 0, 'position-bottom': isIphoneX }">
						确定添加购物车
					</button>
				</view>
			</uni-popup>
		</view>
		
		<ns-login ref="login" href="goods_detail"></ns-login>
		<!-- <view class="" v-if="isshow == false" style="align-items: center;display: flex; justify-content: center; padding-top: 50rpx; font-size: 30rpx;">
			您还未登录，请先去
			<view class="" @click="godeng" style="color: #007AFF;font-size:30rpx;">
				登录
			</view>
		</view> -->
	</view>
	
</template>

<script>
import http from 'common/js/http.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import loadingCover from '@/components/loading/loading.vue';
import category from '../public/js/category.js';
import nsLogin from '@/components/ns-login/ns-login.vue';
export default {
	components: {
		uniLoadMore,
		loadingCover,
		nsLogin
	},
	mixins: [http, category],
};
</script>

<style lang="scss">
@import '../public/css/category.scss';
</style>


<style lang="scss">
	@import 'static/css/goods/detail.scss';
</style>
<style scoped>
	/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		max-height: unset !important;
	}

	.sku-layer>>>.uni-popup__wrapper-box {
		overflow-y: initial !important;
	}

	.FontLeft {
		width: 240rpx;
		height: 100rpx;
		border: 1rpx solid #EEEEEE;
		display: flex;
		justify-content: center;
		align-items: center;

		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.FontRight {
		width: 440rpx;
		height: 100rpx;
		border: 1rpx solid #EEEEEE;
		border-left: none;
		display: flex;
		justify-content: center;
		align-items: center;


		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}

	.poster-layer>>>.uni-popup__wrapper-box {
		max-height: initial !important;
	}

	.product-discount .countdown .clockrun>>>.uni-countdown__number {
		min-width: 32rpx;
		height: 32rpx;
		text-align: center;
		line-height: 32rpx;
		background: #000;
		/* // #690b08 */
		border-radius: 4px;
		display: inline-block;
		padding: 4rpx;
		margin: 0;
		border: none;
	}

	.product-discount .countdown .clockrun>>>.uni-countdown__splitor {
		width: 10rpx;
		height: 32rpx;
		line-height: 36rpx;
		text-align: center;
		display: inline-block;
		color: #000;
		padding: 0 4rpx;
	}

	.original-price {
		text-decoration: line-through;
		color: #333;
		font-size: 26rpx;
	}
</style>
